<template>
  <el-dialog
    title="设备详情"
    v-model="dialogVisible"
    width="50%"
    :close-on-click-modal="false"
  >
    <div v-if="device.id">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="设备ID">{{ device.id }}</el-descriptions-item>
        <el-descriptions-item label="设备名称">{{ device.deviceName }}</el-descriptions-item>
        <el-descriptions-item label="IP地址">{{ formatIpAddress(device.ipAddress) }}</el-descriptions-item>
        <el-descriptions-item label="在线状态">
          <el-tag :type="device.status === 1 ? 'success' : 'info'">
            {{ formatDeviceStatus(device.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="最后在线时间">{{ formatDateTime(device.lastSeen) }}</el-descriptions-item>
      </el-descriptions>
      
      <div class="dialog-footer">
        <el-button-group>
          <el-tooltip content="发送消息" placement="top">
            <el-button type="primary" @click="handleSendMessage" :disabled="device.status !== 1">
              <el-icon><ChatDotRound /></el-icon> 发送消息
            </el-button>
          </el-tooltip>
          <el-tooltip content="发送文件" placement="top">
            <el-button type="success" @click="handleSendFile" :disabled="device.status !== 1">
              <el-icon><Document /></el-icon> 发送文件
            </el-button>
          </el-tooltip>
        </el-button-group>
      </div>
    </div>
    <div v-else class="empty-content">
      <el-empty description="未获取到设备信息"></el-empty>
    </div>
  </el-dialog>
</template>

<script setup>
import { computed } from 'vue';
import { formatIpAddress, formatDeviceStatus } from '@/utils/deviceUtils';
import { ChatDotRound, Document } from '@element-plus/icons-vue';

// 组件属性
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  device: {
    type: Object,
    default: () => ({})
  }
});

// 组件事件
const emit = defineEmits(['update:visible', 'send-message', 'send-file']);

// 计算属性：对话框可见性
const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => emit('update:visible', val)
});

// 格式化日期时间
const formatDateTime = (dateTime) => {
  if (!dateTime) return '未知';
  const date = new Date(dateTime);
  return date.toLocaleString();
};

// 发送消息
const handleSendMessage = () => {
  emit('send-message', props.device);
  dialogVisible.value = false;
};

// 发送文件
const handleSendFile = () => {
  emit('send-file', props.device);
  dialogVisible.value = false;
};
</script>

<style scoped>
.dialog-footer {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.empty-content {
  padding: 20px;
  text-align: center;
}
</style> 